<template>
	
	<view>
		<login class="login-modal" :modal="modal"
		@success="loginSuccess" @fail="loginFail" @cancel="loginCancel" 
		v-show="showLogin"></login>
		<view class="pd24_20">
			<view  v-if="isLogin == false" @click="showLoginAct" class="flex alcenter space">
				<view   class="flex alcenter">
					<view class="member-face">
						<image class="face" :src="statics.defaultFace"></image>
					</view>
					<view class="ml15">
						<view class="ft16 cl-main">暂未登录</view>
						<view class="mt12 ft12 cl-notice">点击登录 享受更多会员特惠</view>
					</view>
				</view>
				<text class="iconfont iconicon_arrow_small ft12 cl-notice"></text>	
			</view>
			<view  v-else class="flex alcenter space">
				<view class="flex alcenter" @click="opsets">
					<view class="member-face">
						<image class="face" :src="avatarUrl"></image>
						<!-- <image class="vip-level" :src="userinfo.group_id>1?statics.vipLevelImg[0]:''"></image> -->
					</view>
					<view class="ml15">
						<view class="ft16 cl-main">{{ userinfo.userName || '' }}</view>
						<view class="mt12 ft12 cl-notice">ID:{{ userinfo.openId || '' }}</view>
					</view>
				</view>
				<view class="btn-mini opsetads" @click="opset">
					<i class="yticon icon-shezhi ft24 cl-notice"></i>
				</view>
			</view>
			<view style="width: 100%; height: 30upx;"></view>
			<!-- VIP card -->
			<!-- <home-vipcard :userinfo="userinfo" @loginAct="showLoginAct" @qrcode="showQrcode = true"></home-vipcard> -->
			<!-- <view class="mt24">
				<home-banner :banners="banners"></home-banner>
			</view> -->
			<view class="flex wrap space mt16">
				<view v-for="(item,index) in getMenus" :key="index" :class="index > 1 ? 'mt16': ''">
					<view v-if="item.type == 'link'" :data-index="index" @click="memberLinkTo" class="box pd16_15 flex alcenter" style="width: 320rpx;" >
						<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
						<text class="ml15 ft14 ftw500 cl-main">{{item.name}}</text>
					</view>
					<view v-else style="width: 320rpx;">
						<button class="box pd16_15 flex alcenter" :open-type="item.type" style="padding: 32rpx 30rpx; margin: 0;">
							<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
							<text class="ml15 ft14 ftw500 cl-main">{{item.name}}</text>
						</button>
					</view>
				</view>
			</view>
			
			
			<com-copyright></com-copyright>
			
			<!-- <com-footer model="member"></com-footer> -->
			
			<dialog-birthday v-if="showBirthday" @closed="showBirthday = false"></dialog-birthday>
			<!-- <dialog-login v-if="showLogin" @loginYes="loginYes" @closed="showLogin = false"></dialog-login> -->
			<dialog-qrcode v-if="showQrcode" @closed="showQrcode = false"></dialog-qrcode>
		</view>	
	</view>
</template>

<script>
	export default{
		data(){
			return {
				isLogin:false,
				showLogin:false,
				isBirthday:true,
				showBirthday:false,
				showQrcode:false,
				avatar:'',
				userinfo:{},
				banners:[],
				vipLevel:0,
				iskq:0,
				memberMenus:[
					{name:'我的会员',type:'link',model:'',link:'/pages/client/vipcard/index',icon:this.$config.staticUrl + 'vipcard_icon_my_card@2x.png',show:1},
					{name:'我的订单',type:'link',model:'',link:'/pages/client/order/index',icon:this.$config.staticUrl + 'vipcard_icon_my_order@2x.png',show:1},
					{name:'收货地址',type:'link',model:'',link:'/sub_pages/scenicArea/address',icon:this.$config.staticUrl + 'vipcard_icon_my_address@2x.png',show:0},
					{name:'官方商城',type:'link',model:'',link:'/pages/client/shop',icon:this.$config.staticUrl + 'vipcard_icon_my_integral@2x.png',show:0},
					// {name:'我的邀请',type:'link',model:'',link:'/pages/client/mytuandui',icon:this.$config.staticUrl + 'vipcard_icon_my_invite@2x.png',show:1},
					{name:'意见反馈',type:'link',model:'',link:'/sub_pages/scenicArea/feedback',icon:this.$config.staticUrl + 'vipcard_icon_my_advise@2x.png',show:0},
					// {name:'专属顾问',type:'link',model:'',link:'/pages/client/vipcard/adviser',icon:this.$config.staticUrl + 'vipcard_icon_my_advise@2x.png',show:1},
				],
				
				userinfowx:{},
				id:'',
				openid:'',
				unionid:'',
				apiToken:'',
				sessionKey:'',
				avatarUrl:'',
				modal://登录插件弹窗内容定义
				{
					title: '用户登录',  //弹窗标题内容
					content: '授权登录后，开始使用完整功能',  //弹窗提示内容
				
					//以下配置仅《微注册》插件支持
					confirmText: '更新',  //确认按钮文字内容，非必填，默认“登录”,
					cancelText: '暂不',  //取消按钮文字内容，非必填，默认“取消”
					confirmStyle: {  //确认按钮文字颜色和按钮背景色，非必填
						color: '#000000',    //文字颜色
						backgroundColor: '#FFFFFF'   //背景颜色
					},
					cancelStyle: {  //取消按钮文字颜色和按钮背景色，非必填
						color: 'red',     //文字颜色
						backgroundColor: '#FFFFFF'   //背景颜色
					}
				}
			}
		},
		computed:{
			getMenus(){
				let arr = new Array;
				for(var a  in this.memberMenus){
					if(this.memberMenus[a].show == 1){
						arr.push(this.memberMenus[a]);
					}
				}
				return arr;
			}
		},
		onLoad(){
			
		},
		onShow() {
			// 判断登录状态
			this.checkIsLogin()
			console.log("this.isLogin")
			console.log(this.isLogin)
			
			this.$forceUpdate()
			// this.banners=uni.getStorageSync("config").banner
			// this.getList();
		},
		onShareAppMessage(e){
			
		},
		onShareTimeline(e){
			
		},
		methods:{
			loginSuccess (res) {//登录成功回调
				console.log(res);
				this.showLogin = false;//登录成功后，关闭登录弹窗
				
				let _Info = res.target.res;
				console.log('loginSuccess - _info')
				console.log(_Info)
				console.log(_Info.avatarUrl)
				console.log(_Info.nickName)
				
				//_Info.avatarUrl：用户头像地址
				//_Info.nickName：用户昵称
			
				//用户可以将获取到的头像和地址存储到服务器保存，下次就不用再次登录了
				// 上传用户信息到服务器，并标记用户已登录
				this.wxlogin(_Info.avatarUrl,_Info.nickName)
				
			},
			loginFail (res) {//登录失败回调
				console.log(res);
				this.showLogin = false;
			
				//某些手机端会出现登录失败情况，针对这部分的用户，如果业务需要登录后才能使用，建议这里按照登录成功处理，否则该类用户无法进入登录状态
				// 上传用户信息（默认头像和昵称）到服务器，并标记用户已登录
			},
			loginCancel (res){//用户取消登录回调
				console.log(res);
				this.showLogin = false;
			},
			
			wxlogin(avatarUrl,nickName){
				uni.showLoading({
					title: '授权中...'
				});
				console.log('this.userinfowx')
				console.log(this.userinfowx)
				var userinfowx=this.userinfowx
				
				var this_=this
				uni.login({
					timeout: 10000,
					provider: 'weixin',  //如果是uniapp，在这里需要标明平台的类型，支持的参数请查阅uniapp官网的uni.login()文档
					// onlyAuthorize: true, // 微信登录仅请求授权认证
					success: (res) => {
						//登陆成功的回调
						console.log('wxLogin - success 回调');
						console.log(res);
						
						uni.request({
							  url: this.configs.webUrl+'/wxmini/login',  
							  method:'GET',  
							  data: {   
								  //token: uni.getStorageSync("userinfo").token,       //你的小程序的secret,  
								  code: res.code,                        //wx.login 登录成功后的code  
								  avatarUrl:avatarUrl,
								  nickName:nickName,
							  },  
							  success: (cts) => {  
									console.log('后台服务wxmini-login -res')
									console.log(cts.data)
									if(cts.data.code==200){
										console.log("this.userinfo")
										console.log(this.userinfo)
										this.userinfo = cts.data.data
										// this.id=cts.data.data.id
										// this.openid=cts.data.data.openId
										// this.unionid=cts.data.data.unionId
										// this.apiToken=cts.data.data.apiToken
										// this.sessionKey=cts.data.data.sessionKey
										uni.showModal({
											title: '温馨提示',
											content: '授权成功',
											showCancel: false,
											confirmText: "确定",
											success: function (res) {
												if (res.confirm) {
													this_.saveInfoToLocal()
												} else if (res.cancel) {
													
												}
											}
										});
									}else{
									  uni.showModal({
										title: '温馨提示',
										content: JSON.stringify(cts.data),
										showCancel: false,
										confirmText: "确定",
										success: function (res) {
											if (res.confirm) {
												//uni.navigateBack();
											} else if (res.cancel) {
												
											}
										}
									  });
								  }
							  },
							  fail: (err1) => {
								console.log(err1);
									uni.hideLoading();
							  }
						});
					},
					fail: (err) => {
						uni.hideLoading();
					}
				})
			},
			saveInfoToLocal(){
				// this.userinfowx.id=this.id
				// this.userinfowx.openid=this.openid
				// this.userinfowx.apiToken=this.apiToken
				// this.userinfowx.sessionKey=this.sessionKey
				// this.userinfowx.avatarUrl=this.avatarUrl
				// uni.setStorage({//缓存配置信息
				// key: 'userinfowx',  
				// data: this.userinfowx
				// })
				uni.setStorage({//缓存配置信息
				key: 'userinfo',  
				data: this.userinfo
				}),
				uni.setStorage({//缓存配置信息
				key: 'apiToken',  
				data: this.apiToken
				})
				
				this.checkIsLogin()
				uni.hideLoading();
			},
			
			
			checkIsLogin(){
				console.log("onShow")
				console.log(uni.getStorageSync("userinfo"))
				if(uni.getStorageSync("userinfo").apiToken){
					this.isLogin =true; 
					//初始化页面
					this.avatarUrl = uni.getStorageSync("userinfo").avatarUrl
					this.userinfo = uni.getStorageSync("userinfo")
					// this.ongrzlTap();
				}else{
					this.isLogin =false;
					this.userinfo = {}
				}
			},
			
			opset(){
				uni.navigateTo({
					url:'/pages/set/set'
				})
			},
			opsets(){
				uni.navigateTo({
					url:'/pages/set/grzl/grzl'
				})
			},
			async ongrzlTap(){
				
				
				
				
				let data = {};
				data.token = uni.getStorageSync("userinfo").apiToken;
				data.uid = uni.getStorageSync("userinfo").id;
				uni.request({
					url: this.configs.webUrl+'/api/user/index',
					data: data,
					success: res =>{
						if(res.data.code==1){
							let ionfo=res.data.data
							ionfo.isLogin=true
							this.userinfo=ionfo
							uni.setStorage({//缓存配置信息
								key: 'userinfo',  
								data: res.data.data
							})
							if(res.data.data.avatar){
									var str = res.data.data.avatar;
									if(str.indexOf("data:image") != -1){
										this.avatar='';
									}else{
										if(str.indexOf("http") != -1){
											this.avatar=res.data.data.avatar;
										}else{
											this.avatar=this.configs.imgUrl+res.data.data.avatar;
										}
									}
								}else{
									this.avatar='';
								}
								uni.setStorage({//缓存配置信息
									key: 'avatar',  
									data: this.avatar
								})
						}else{
							uni.showToast({ title: res.data.msg,icon:"none" });
						}
					},
					fail: (data, code) => {
						//console.log('fail' + JSON.stringify(data));
					}
				});		
			},
			getList() {
				let data = {};
				var limit=15;
				data.limit=limit
				data.ishot=2
				uni.request({
					url: this.configs.webUrl+'/api/video/lists',
					data: data,
					success: data => {
						//console.log(data.data)
						uni.setStorage({//缓存配置信息
							key: 'config',  
							data: data.data.config
						})
						if(uni.getStorageSync("config").iskq){
							this.iskq=uni.getStorageSync("config").iskq;
						}
					},
					fail: (data, code) => {
					}
				});
			},
			memberLinkTo(e){
				let index =  parseInt(e.currentTarget.dataset.index);
				if(this.isLogin == false&& this.getMenus[index].model != 'integral'){
					this.showLogin = true;
				}else{
					if(this.getMenus[index].link != ''){
						if(this.getMenus[index].model == 'integral'){
							uni.redirectTo({
								url:this.getMenus[index].link 
							})
						}else{
							uni.navigateTo({
								url:this.getMenus[index].link 
							})
						}
					}
				}
			},
			birthdayAct(){
				if(this.isBirthday){
					uni.navigateTo({
						url:'/sub_pages/scenicArea/birthday'
					})
				}else{
					uni.navigateTo({
						url:'/sub_pages/scenicArea/info'
					})
				}
			},
			showLoginAct(){
				this.showLogin =true
				// uni.navigateTo({
				// 	url:'/pages/login/login'
				// })
			},
			loginYes(){
				
			},
			outlogin(){
				uni.showModal({
				    content: '确定要退出登录么',
				    success: (e)=>{
				    	if(e.confirm){
				    		uni.clearStorageSync();
							
				    		setTimeout(()=>{
				    			this.isLogin =false; 
								this.userinfo.isLogin=false
				    		}, 200)
				    	}
				    }
				});
			}
		}
	}
</script>

<style>
	.login-modal{
	    position: fixed;
	    top: 0;
	    z-index: 99999999;
		width: 100%;
		height: 100%;
		/* width: 470rpx;
		height: 100rpx; */
	    background-color: #00000098;
	}
	.opsetads{
		background: #FFFFFF;
		color:#000000; 
		width: 70upx; 
		line-height: 70upx; 
		height: 70upx; 
		text-align: center; 
		border-radius: 100%;
		animation: rotate 10s linear infinite;
	}
	@keyframes rotate{
	    0%{
	        transform:rotate(0deg) skew(0deg) scale(1);
	        -ms-transform:rotate(0deg) skew(0deg) scale(1);     /* IE 9 */
	        -moz-transform:rotate(0deg) skew(0deg) scale(1);     /* Firefox */
	        -webkit-transform:rotate(0deg) skew(0deg) scale(1); /* Safari  Chrome */
	        -o-transform:rotate(0deg) skew(0deg) scale(1); 
	    }
	    100%{
	        transform:rotate(360deg) skew(0deg) scale(1);
	        -ms-transform:rotate(360deg) skew(0deg) scale(1);     /* IE 9 */
	        -moz-transform:rotate(360deg) skew(0deg) scale(1);     /* Firefox */
	        -webkit-transform:rotate(360deg) skew(0deg) scale(1); /* Safari  Chrome */
	        -o-transform:rotate(360deg) skew(0deg) scale(1); 
	    }
	}
	.member-face{
		position: relative;
	}
	.member-face .vip-level{
		height: 48rpx;
		width: 48rpx;
		position: absolute;
		left: calc(50% - 24rpx);
		top: -30rpx;
	}
	.member-face .face{
		width: 160rpx;
		height: 160rpx;
		border:6rpx solid #FFFFFF;
		background: #FFFFFF;
		border-radius: 100rpx;
		box-shadow: 0rpx 24rpx 48rpx 0rpx rgba(197, 202, 219, 0.3);
	}
	.miniapp-icon{
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		background: #F2F2F2;
	}
</style>